<template>
  <el-dialog
    title="请选择图标"
    :visible.sync="model" width="500px" @closed="diaologClosed">
    <div class="icon-panel">
      <el-radio-group v-model="color">
        <el-radio-button label="">默认</el-radio-button>
        <el-radio-button class="icon-blue" label="icon-blue">蓝色</el-radio-button>
        <el-radio-button class="icon-purple" label="icon-purple">紫色</el-radio-button>
        <el-radio-button class="icon-green" label="icon-green">绿色</el-radio-button>
        <el-radio-button class="icon-red" label="icon-red">红色</el-radio-button>
        <el-radio-button class="icon-yellow" label="icon-yellow">黄色</el-radio-button>
        <el-radio-button class="icon-gray" label="icon-gray">灰色</el-radio-button>
        <el-radio-button class="icon-black" label="icon-black">黑色</el-radio-button>
      </el-radio-group>
      <el-alert :closable="false"
                type="warning" style="margin-top: 10px">
        <span slot="title">已选择 "<i :class="selected+' '+color"></i>{{selected+' '+color}}"</span>
      </el-alert>
      <el-input
        placeholder="请输入内容并按enter搜索"
        prefix-icon="el-icon-search"
        v-model="keyword" style="margin-top: 10px" @change="filterIcon"/>
      <ul class="icon-list">
        <li v-for="icon in iconList" :key="icon" @click="selectIcon(icon)" :class="selected&&selected===icon?'icon-selected':''">
          <span><i :class="icon+' '+color"></i><span class="icon-name">{{icon}}</span></span>
        </li>
      </ul>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="model = false">取 消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import icons from './icons'
export default {
  name: 'icons',
  props: {
    value: {
      type: Boolean,
      default: true
    },
    onSelect: Function
  },
  watch: {
    value (val) {
      this.model = val
    }
  },
  data () {
    return {
      iconList: icons,
      color: '',
      model: false,
      keyword: '',
      selected: ''
    }
  },
  methods: {
    filterIcon () {
      let self = this
      if (!self.keyword) {
        self.iconList = icons
        return
      }
      self.iconList = icons.filter(item => {
        return item.indexOf(self.keyword) > -1
      })
    },
    selectIcon (icon) {
      if (icon === this.selected) {
        this.selected = ''
        return
      }
      this.selected = icon
    },
    diaologClosed () {
      this.iconList = icons
      this.selected = ''
      this.color = ''
      this.keyword = ''
      this.$emit('input', false)
    },
    submit () {
      const iconCls = this.selected + ' ' + this.color
      if (this.onSelect && this.onSelect instanceof Function) {
        this.onSelect(iconCls)
      }
      this.model = false
    }
  }
}
</script>

<style lang="scss">
  @import "index";
</style>
